<template>
  <!-- 头部选项 -->
  <header-option>
    <template v-slot:btn>
      <div>
        <cs-btn
          v-if="innerMenu.add.flag"
          type="primary"
          btnText="添加"
          @click.native="addCartDialogVisible"
        />
        <input type="file" class="hide_file_input" ref="fileinput" @change="handleUpload" />
        <cs-btn v-if="innerMenu.del.flag" btnText="删除" @click.native="deleteBtnClick" />
        <cs-btn v-if="innerMenu.exp.flag" btnText="导出" @click.native="exportlist" />
        <cs-btn v-if="innerMenu.imp.flag" btnText="导入" @click.native="clickUpload" />
        <input type="file" class="hide_file_input" ref="fileinput" @change="handleUpload" />
        <el-link
          v-if="innerMenu.imp.flag"
          type="primary"
          :underline="false"
          @click.once="getTemplates"
          >下载导入模版</el-link
        >
      </div>
    </template>
    <template v-slot:input>
      <cs-label labelText="车辆联系人" class="carContactsLabel" width="255">
        <el-input class="cs-input" v-model.trim="headerData.carContacts" clearable></el-input>
      </cs-label>
      <cs-label labelText="车牌号码" width="241">
        <el-input class="cs-input" v-model.trim="headerData.carNum" clearable></el-input>
      </cs-label>
      <cs-label labelText="车辆类型" width="241" v-if="false">
        <el-select
          v-model="headerData.carTypeValue"
          placeholder="请选择"
          class="cs_select"
          clearable
        >
          <el-option
            v-for="item in headerData.carType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </cs-label>
      <cs-btn type="search" btnText="查询" class="searcg_btn" @click.native="searchBtnClick" />
    </template>
  </header-option>
</template>

<script>
import _ from 'lodash'

import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'
import { baseUpload } from '@/utils/request'
import localCache from '@/utils/localCache'

export default {
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  props: {
    innerMenu: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      headerData: {
        carContacts: '',
        carType: [
          {
            value: '0',
            label: '执法suv车'
          },
          {
            value: '1',
            label: '执法轿车'
          }
        ],
        carTypeValue: ''
      },
      updata: {
        Authorization: ''
      },
      currentSelect: 0
    }
  },
  created() {
    this.$bus.$on('currentSelect_car', (selectNum) => {
      this.currentSelect = selectNum
    })
    this.updata.Authorization = localCache.getItem('token')
    // console.log('车辆管理权限', this.rights)
  },
  beforeDestroy() {
    this.$bus.$off('searchCar')
    this.$bus.$off('deleteBtnClick')
    this.$bus.$off('addCartDialogVisible')
    // this.$bus.$off('exportlist')
    this.$bus.$off('getTemplates')
  },
  watch: {
    'headerData.carContacts'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchCar', {
          carContacts: this.headerData.carContacts,
          carNum: this.headerData.carNum
        })
      }
    },
    'headerData.carNum'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchCar', {
          carContacts: this.headerData.carContacts,
          carNum: this.headerData.carNum
        })
      }
    }
  },
  methods: {
    deleteBtnClick() {
      if (this.currentSelect === 0) {
        this.$message({
          message: '请选择需要删除的车辆',
          type: 'warning'
        })
      } else {
        this.$bus.$emit('deleteBtnClick')
      }
    },
    addCartDialogVisible() {
      this.$bus.$emit('addCartDialogVisible')
    },
    // 搜索按钮点击事件
    searchBtnClick: _.throttle(function () {
      this.$bus.$emit('searchCar', {
        carContacts: this.headerData.carContacts,
        carNum: this.headerData.carNum
        // carTypeValue: this.headerData.carTypeValue ? this.headerData.carTypeValue - 0 : ''
      })
    }, 1000),
    exportlist() {
      this.$bus.$emit('carexportlist', {
        carContacts: this.headerData.carContacts,
        carNum: this.headerData.carNum
      })
    },
    getTemplates() {
      this.$bus.$emit('getTemplates')
    },
    clickUpload() {
      this.$refs.fileinput.dispatchEvent(new MouseEvent('click'))
    },
    handleUpload(e) {
      const file = e.target.files[0]
      baseUpload('/business/car/import', {
        file
      }).then((res) => {
        const { code, msg, data } = res
        if (code === 0) {
          this.$message.success('数据导入成功')
          this.searchBtnClick()
        } else {
          this.$message.error('数据导入失败')
          this.$notify.error({
            title: msg,
            dangerouslyUseHTMLString: true,
            message: data.join('、'),
            duration: 0
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.hide_file_input {
  position: fixed;
  left: -1000px;
}

/* 头部样式start */
.cs-input >>> .el-input__inner {
  width: 152px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.cs_select >>> .el-input__inner {
  width: 152px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
}

/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.searcg_btn {
  margin-right: 30px;
}

/* 头部样式end */
.ml10 {
  margin-left: 10px;
}

.f14 {
  font-size: 14px;
}
</style>
